<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8"%>


<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() 
	                   + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>学生公寓管理系统</title>
	<!-- 引入css样式文件 -->
	<!-- Bootstrap Core CSS -->
	<link href="<%=basePath%>css/bootstrap.min.css" rel="stylesheet" />
	<!-- MetisMenu CSS -->
	<link href="<%=basePath%>css/metisMenu.min.css" rel="stylesheet" />
	<!-- DataTables CSS -->
	<link href="<%=basePath%>css/dataTables.bootstrap.css" rel="stylesheet" />
	<!-- Custom CSS -->
	<link href="<%=basePath%>css/sb-admin-2.css" rel="stylesheet" />
	<!-- Custom Fonts -->
	<link href="<%=basePath%>css/font-awesome.min.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath%>css/boot-crm.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
  <!-- 导航栏部分 -->
  <nav class="navbar navbar-default navbar-static-top" role="navigation"
		 style="margin-bottom: 0">
	<div class="navbar-header">
		<a class="navbar-brand" href="<%=basePath%>good/list.action">学生公寓管理系统</a>
	</div>
	<!-- 导航栏右侧图标部分 -->
	<ul class="nav navbar-top-links navbar-right">
	    <!-- 邮件通知 start -->
		<li class="dropdown">
			<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
				<i class="fa fa-envelope fa-fw"></i>
				<i class="fa fa-caret-down"></i>
			</a>
			<ul class="dropdown-menu dropdown-messages">
				<li>
				    <a href="#">
						<div>
							<strong>张经理</strong> <span class="pull-right text-muted">
								<em>昨天</em>
							</span>
						</div>
						<div>今天晚上开会，讨论一下下个月工作的事...</div>
				    </a>
				</li>
				<li class="divider"></li>
				<li>
				    <a class="text-center" href="#">
				        <strong>查看全部消息</strong>
						<i class="fa fa-angle-right"></i>
				    </a>
				</li>
			</ul>
		</li>
		<!-- 邮件通知 end -->
		<!-- 任务通知 start -->
		<li class="dropdown">
			<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
			    <i class="fa fa-tasks fa-fw"></i>
				<i class="fa fa-caret-down"></i>
			</a>
			<ul class="dropdown-menu dropdown-tasks">
				<li>
				    <a href="#">
						<div>
							<p>
								<strong>任务 1</strong> 
								<span class="pull-right text-muted">完成40%</span>
							</p>
							<div class="progress progress-striped active">
								<div class="progress-bar progress-bar-success"
									role="progressbar" aria-valuenow="40" aria-valuemin="0"
									aria-valuemax="100" style="width: 40%">
									<span class="sr-only">完成40%</span>
								</div>
							</div>
						</div>
				    </a>
				</li>
				<li class="divider"></li>
				<li>
				    <a href="#">
						<div>
							<p>
								<strong>任务 2</strong> 
								<span class="pull-right text-muted">完成20%</span>
							</p>
							<div class="progress progress-striped active">
								<div class="progress-bar progress-bar-info" role="progressbar"
									aria-valuenow="20" aria-valuemin="0" aria-valuemax="100"
									style="width: 20%">
									<span class="sr-only">完成20%</span>
								</div>
							</div>
						</div>
				    </a>
				</li>
				<li class="divider"></li>
				<li>
				    <a class="text-center" href="#"> 
				        <strong>查看所有任务</strong>
						<i class="fa fa-angle-right"></i>
				    </a>
				</li>
			</ul> 
		</li>
		<!-- 任务通知 end -->
		<!-- 消息通知 start -->
		<li class="dropdown">
			<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
				<i class="fa fa-bell fa-fw"></i>
				<i class="fa fa-caret-down"></i>
			</a>
			<ul class="dropdown-menu dropdown-alerts">
				<li>
				    <a href="#">
						<div>
							<i class="fa fa-comment fa-fw"></i> 新回复 
							<span class="pull-right text-muted small">4分钟之前</span>
						</div>
				    </a>
				</li>
				<li class="divider"></li>
				<li>
				    <a href="#">
						<div>
							<i class="fa fa-envelope fa-fw"></i> 新消息 
							<span class="pull-right text-muted small">4分钟之前</span>
						</div>
				    </a>
				</li>
				<li class="divider"></li>
				<li>
				    <a href="#">
						<div>
							<i class="fa fa-tasks fa-fw"></i> 新任务 
							<span class="pull-right text-muted small">4分钟之前</span>
						</div>
				    </a>
				</li>
				<li class="divider"></li>
				<li>
				    <a href="#">
						<div>
							<i class="fa fa-upload fa-fw"></i> 服务器重启 
							<span class="pull-right text-muted small">4分钟之前</span>
						</div>
				    </a>
				</li>
				<li class="divider"></li>
				<li>
				    <a class="text-center" href="#"> 
				        <strong>查看所有提醒</strong>
						<i class="fa fa-angle-right"></i>
				    </a>
				</li>
			</ul> 
		</li>
		<!-- 消息通知 end -->
		<!-- 用户信息和系统设置 start -->
		<li class="dropdown">
			<a class="dropdown-toggle" data-toggle="dropdown" href="#"> 
				<i class="fa fa-user fa-fw"></i>
				<i class="fa fa-caret-down"></i>
			</a>
			<ul class="dropdown-menu dropdown-user">
				<li><a href="#"><i class="fa fa-user fa-fw"></i>
				               用户：${USER_SESSION.user_name}
				    </a>
				</li>
				<li><a href="#"><i class="fa fa-gear fa-fw"></i> 系统设置</a></li>
				<li class="divider"></li>
				<li>
					<a href="${pageContext.request.contextPath }/logout.action">
					<i class="fa fa-sign-out fa-fw"></i>退出登录
					</a>
				</li>
			</ul> 
		</li>
		<!-- 用户信息和系统设置结束 -->
	</ul>
	<!-- 左侧显示列表部分 start-->
	<div class="navbar-default sidebar" role="navigation">
		<div class="sidebar-nav navbar-collapse">
			<ul class="nav" id="side-menu">
				<li class="sidebar-search">
					<div class="input-group custom-search-form">
						<input type="text" class="form-control" placeholder="查询内容...">
						<span class="input-group-btn">
							<button class="btn btn-default" type="button">
								<i class="fa fa-search" style="padding: 3px 0 3px 0;"></i>
							</button>
						</span>
					</div> 
				</li>
				<li>
				      <a href="${pageContext.request.contextPath }/dorm/list.action">
				        <i class="fa fa-dashboard fa-fw" ></i> 寝室管理
				      </a>
				</li>				
				<li>
				    <a href="${pageContext.request.contextPath }/student/list.action">
				      <i class="fa fa-edit fa-fw"></i> 学生管理
				    </a>
				</li>
				<li>
				    <a href="${pageContext.request.contextPath }/class/list.action">
				      <i class="fa fa-tasks fa-fw"></i> 班级管理
				    </a>
				</li>
				<li>
				    <a href="${pageContext.request.contextPath }/user/userlist.action">
				      <i class="fa fa-user fa-fw"  class="active"></i> 用户管理
				    </a>
				</li>		
			</ul>
		</div>
	</div>
	<!-- 左侧显示列表部分 end--> 
  </nav>
<!-- 用户查询部分  start-->
<div id="page-wrapper">
	<table class="table table-hover table-striped">
	  <caption>用户信息列表
	    <a href="#" class="btn btn-primary" role="button" data-toggle="modal" data-target="#newUserDialog">新建</a>
	  </caption>
	  <thead>
	    <tr>
	      <!-- <th>用户头像</th> -->
	      <th>用户名</th>
	      <th>密码</th>
	      <th>操作</th>
	    </tr>
	  </thead>
	  <tbody>
	  <c:forEach items="${ulist}" var="user">
	      <tr>
	      <%-- <td><img src="${pageContext.request.contextPath }${user.Photourl}" width="60px" height="40px"/></td> --%>
	      <td>${user.user_name}</td>
	      <td>${user.user_pass}</td>
	      <td> <a class="btn btn-default  btn-xs" role="button" onclick="editUser(user_id)">详情</a>
	      	   <a href="#" class="btn btn-default  btn-xs" role="button" data-toggle="modal" data-target="#userEditDialog" onclick="editUser('${user.user_id}')">修改</a>
	           <a href="#" class="btn btn-default  btn-xs" role="button" onclick="deleteUser('${user.user_id}')">删除</a>
	      </td>
	    </tr>
	  </c:forEach>
	
	  </tbody>
	</table>
	
</div>
		
<!-- 创建用户模态框 -->
<div class="modal fade" id="newUserDialog" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">新建用户信息</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" id="new_user_form">
                   

					<div class="form-group">
						<label for="new_userName" class="col-sm-2 control-label">
						    用户名称
						</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="new_username" placeholder="用户名称" name="user_name" />
						</div>
					</div>
					<div class="form-group">
						<label for="new_userpass" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="new_userpass" placeholder="密码" name="user_pass" />
						</div>
					</div>
					<div class="form-group">
						<label for="new_userage" class="col-sm-2 control-label">年龄</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="new_userage" placeholder="年龄" name="user_age" />
						</div>
					</div>
					<div class="form-group">
						<label for="new_usersex" class="col-sm-2 control-label">性别</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="new_usersex" placeholder="性别" name="user_sex" />
						</div>
					</div>
					<div class="form-group">
						<label for="new_userphone" class="col-sm-2 control-label">电话</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="new_userphone" placeholder="电话" name="user_phone" />
						</div>
					</div>
					<div class="form-group">
						<label for="new_useremail" class="col-sm-2 control-label">邮箱</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="new_useremail" placeholder="邮箱" name="user_email" />
						</div>
					</div>

				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" onclick="createUser()">创建用户</button>
			</div>
		</div>
	</div>
</div>
<!-- 创建用户模态框end -->

<!-- 修改用户模态框 -->
<div class="modal fade" id="userEditDialog" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">修改用户信息</h4>
			</div>
			<div class="modal-body">
				<form class="form-horizontal" id="edit_user_form">
                   <input type="hidden" id="userid" name="user_id"/>

					<div class="form-group">
						<label for="edit_userName" class="col-sm-2 control-label">
						    用户名称
						</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="username" placeholder="用户名称" name="user_name"/>
						</div>
					</div>
					<div class="form-group">
						<label for="edit_userName" class="col-sm-2 control-label">密码</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="password" placeholder="密码" name="user_pass" />
						</div>
					</div>
					<div class="form-group">
						<label for="edit_userName" class="col-sm-2 control-label">
						年龄						
						</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="userage" placeholder="年龄" name="user_age"/>
						</div>
					</div>
					<div class="form-group">
						<label for="edit_userName" class="col-sm-2 control-label">
						    性别
						</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="usersex" placeholder="用户性别" name="user_sex"/>
						</div>
					</div>
					<div class="form-group">
						<label for="edit_userName" class="col-sm-2 control-label">
						   Email邮箱
						</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="useremail" placeholder="用户邮箱" name="user_email"/>
						</div>
					</div>
				</form>
			</div>
		    <div class="modal-footer">
				    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				    <button type="button" class="btn btn-primary" onclick="updateUser()">修改用户</button>
			</div>
			</div>
			
		</div>
	</div>
</div>
<!-- 修改用户模态框end -->

<!-- 引入js文件 -->
<!-- jQuery -->
<script src="<%=basePath%>js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<%=basePath%>js/bootstrap.min.js"></script>
<!-- Metis Menu Plugin JavaScript -->
<script src="<%=basePath%>js/metisMenu.min.js"></script>
<!-- DataTables JavaScript -->
<script src="<%=basePath%>js/jquery.dataTables.min.js"></script>
<script src="<%=basePath%>js/dataTables.bootstrap.min.js"></script>
<!-- Custom Theme JavaScript -->
<script src="<%=basePath%>js/sb-admin-2.js"></script>
<!-- 编写js代码 -->
<script type="text/javascript">
//清空新建用户窗口中的数据
function clearUser() {
    $("#new_username").val("");
    $("#new_userpass").val("");
    $("#new_userage").val("");
    $("#new_usersex").val("");
    $("#new_userphone").val("");
    $("#new_useremail").val("");

}
   //创建用户
   function createUser() {

     $.post("${pageContext.request.contextPath}/user/createUser.action",
		
     $("#new_user_form").serialize(),function(data){
            if(data =="OK"){
               alert("用户创建成功！");
               window.location.reload();
            }else{
               alert("用户创建失败！");
               window.location.reload();
            }
        
           });

    }
   
// 通过id获取修改的用户信息
	function editUser(user_id) {
		alert(user_id);
		$.post("${pageContext.request.contextPath}/user/getUserById.action",{"userid":user_id},function(data){
			 $("#userid").val(data.user_id);
	         $("#username").val(data.user_name);
	         $("#password").val(data.user_pass);
	         $("#usersex").val(data.user_sex);
	         $("#userage").val(data.user_age);
	         $("#useremail").val(data.user_email);
		});
	}
	// 执行修改用户信息操作
	function updateUser() {
   	
		$.post("${pageContext.request.contextPath}/user/updateUser.action",$("#edit_user_form").serialize(),function(data){
			if(data =="OK"){
				alert("用户信息更新成功！");
				window.location.reload();
			}else{
				alert("用户信息更新失败！");
				window.location.reload();
			}
		});
	}
	// 删除用户
	function deleteUser(user_id) {
	    if(confirm('确实要删除该用户吗?')) {
	$.post("${pageContext.request.contextPath}/user/deleteUser.action",{"userid":user_id},
	function(data){
	            if(data =="OK"){
	                alert("用户删除成功！");
	                window.location.reload();
	            }else{
	                alert("删除用户失败！");
	                window.location.reload();
	            }
	        });
	    }
	}
</script>
</body>
</html>